<template>
  <el-dialog
    :visible="dialogVisible"
    :append-to-body="true"
    :close-on-click-modal="false"
    top="10vh"
    width="80%"
    custom-class="no-padding-dialog"
    @close="hideView">

    <div
      slot="title"
      class="header"
      @click="showDetail = false">
      <span class="title">{{ config.title }}</span>
      <el-input
        v-if="config.showSearch"
        :placeholder="config.placeholder"
        v-model="inputContent"
        class="search-input"
        @keyup.enter.native="searchInput">
        <el-button
          slot="append"
          icon="el-icon-search"
          @click.native="searchInput" />
      </el-input>
    </div>

    <div class="container">
      <el-table
        v-loading="loading"
        :data="dataList"
        :height="tableHeight"
        :cell-class-name="cellClassName"
        stripe
        border
        highlight-current-row
        style="width: 100%;"
        @row-click="handleRowClick">
        <template v-for="(item, index) in fieldList">
          <el-table-column
            v-if="!item.isHide && item.formType === 'pic'"
            :key="index"
            :label="item.name"
            :fixed="item.fixed"
            :prop="item.fieldName"
            width="112"
            header-align="left"
            align="center">
            <template slot-scope="scope">
              <template
                v-if="isArray(scope.row[scope.column.property])">
                <img
                  v-src="valObj.url"
                  v-for="(valObj, valIndex) in scope.row[scope.column.property]"
                  :key="valIndex"
                  alt=""
                  class="product-pic"
                  @click.stop="previewImage(scope, valIndex)">
              </template>
              <template v-else>
                <img
                  v-src="getUrl(scope.row[scope.column.property])"
                  alt=""
                  class="product-pic"
                  @click.stop="previewImage(scope, null)">
              </template>
            </template>
          </el-table-column>
          <el-table-column
            v-else-if="!item.isHide"
            :key="index"
            :fixed="item.fixed"
            :prop="item.fieldName"
            :label="item.name"
            :width="item.width || ''"
            :min-width="100"
            :sortable="item.sortable || false"
            :formatter="item.formatter || null"
            :class-name="item.canVisit ? 'can-visit--underline' : ''"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <template v-if="item.fieldName === 'state'">
                <span
                  :style="{backgroundColor: examineColor(scope.row.state.id)}"
                  class="status-mark" />
                <span>{{ scope.row.state.name || '--' }}</span>
              </template>
              <template v-else>
                {{ item.formatter(scope.row, scope.column, scope.row[scope.column.property], scope.$index) }}
              </template>
            </template>
          </el-table-column>
        </template>
        <el-table-column v-if="dataList.length === 0" />
      </el-table>

      <div class="p-contianer">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size.sync="pageSize"
          :total="total"
          :pager-count="5"
          class="p-bar"
          background
          layout="prev, pager, next, sizes, total, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>

      <j-x-c-full-screen-detail
        v-if="showDetail && detailType && rowId && detailType !== 'customer'"
        :id="rowId"
        :type="detailType"
        @update="handleRefresh"
        @close="showDetail = false" />

      <!-- CRM详情页面 -->
      <c-r-m-full-screen-detail
        :visible.sync="showDetail"
        :crm-type="detailType"
        :id="rowId"
        @close="showDetail = false"/>
    </div>

  </el-dialog>
</template>

<script>
/**
 * Create by yxk at 2020/7/13 0013
 */
import { jxcFieldQueryListHeadAPI } from '@/api/jxc/field'

import TableMixin from '@/views/jxc/mixins/Table'
import CRMFullScreenDetail from '@/components/CRMFullScreenDetail'
import JXCFullScreenDetail from '@/views/jxc/components/JXCFullScreenDetail'

export default {
  name: 'ListView',
  components: {
    CRMFullScreenDetail,
    JXCFullScreenDetail
  },
  mixins: [TableMixin],
  props: {
    config: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      inputContent: '',
      dialogVisible: true,
      type: '',

      showDetail: false,
      detailType: '',
      rowId: ''
    }
  },
  created() {
    this.type = this.config.type
  },
  mounted() {
    this.getDataList(this.config.params, true)
  },
  methods: {
    /**
     * 获取表头字段和列表数据
     */
    getDataList(params = {}, refresh = false) {
      if (params && Object.keys(params).length === 0) {
        return
      }
      if (refresh) {
        this.currentPage = 1
      }
      this.otherParams = params
      this.loading = true
      if (refresh) {
        jxcFieldQueryListHeadAPI({
          label: this.typeObj.label
        }).then(res => {
          this.formatField(res.data)
          this._getData(params)
          // this.loading = false
        }).catch(() => {
          this.loading = false
        })
      } else {
        this._getData(params)
      }
    },

    _getData(params) {
      this.loading = true
      this.config.request({
        page: this.currentPage,
        limit: this.pageSize,
        label: this.typeObj.label,
        ...params
      }).then(res => {
        this.dataList = res.data.list
        this.total = res.data.totalRow
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },

    handleRefresh() {},

    /**
     * 表格点击事件
     * @param row 被点击的行数据
     * @param field 被点击的字段
     */
    handleTableClick(row, field) {
      if (this.config.type === 'jxc_purchase') {
        if (field === 'orderNumber') {
          this.rowId = row.purchaseId
          this.detailType = 'jxc_purchase'
          this.showDetail = true
        } else if (field === 'supplierId') {
          this.rowId = row[field].id
          this.detailType = 'jxc_supplier'
          this.showDetail = true
        }
      } else if (this.config.type === 'jxc_retreat') {
        if (field === 'orderNumber') {
          this.rowId = row.retreatId
          this.detailType = 'jxc_retreat'
          this.showDetail = true
        } else if (field === 'purchaseId') {
          this.rowId = row[field].id
          this.detailType = 'jxc_purchase'
          this.showDetail = true
        } else if (field === 'supplierId') {
          this.rowId = row[field].id
          this.detailType = 'jxc_supplier'
          this.showDetail = true
        }
      } else if (this.config.type === 'jxc_supplier') {
        if (field === 'supplierName') {
          this.rowId = row.supplierId
          this.detailType = 'jxc_supplier'
          this.showDetail = true
        }
      } else if (this.config.type === 'jxc_sale') {
        if (field === 'orderNumber') {
          this.detailType = this.type
          this.rowId = row.saleId
          this.showDetail = true
        } else if (field === 'customerName' && row.customerName) {
          this.detailType = 'customer'
          this.rowId = row.customerName.id || null
          this.showDetail = true
        }
      } else if (this.config.type === 'jxc_salereturn') {
        if (field === 'saleId') {
          this.rowId = row.saleId.id
          this.detailType = 'jxc_sale'
          this.showDetail = true
        } else if (field === 'orderNumber') {
          this.rowId = row.salereturnId
          this.detailType = 'jxc_salereturn'
          this.showDetail = true
        } else if (field === 'customerName' && row.customerName) {
          this.detailType = 'customer'
          this.rowId = row.customerName.id
          this.showDetail = true
        }
      }
    },

    searchInput() {
      this.currentPage = 1
      this.otherParams.search = this.inputContent
      this._getData(this.otherParams, true)
    },
    hideView() {
      this.$emit('close')
    },
    /**
     * 获取表高
     */
    updateTableHeight() {
      const clientHeight = document.documentElement.clientHeight
      const paddingHeight = clientHeight * 0.2

      this.tableHeight = clientHeight - paddingHeight - 200
    },

    isArray(data) {
      return data instanceof Array
    }
  }
}
</script>

<style scoped lang="scss">
  .header {
    position: relative;
    padding: 10px 20px 10px 0;

    .title {
      font-size: 16px;
      color: #333;
      font-weight: 600;
    }
    .search-input {
      width: 300px;
      margin: -18px 0 0 -150px;
      position: absolute;
      left: 50%;
      top: 50%;
    }
  }

  .product-pic {
    max-width: 80px;
    vertical-align: middle;
    margin: 8px auto;
  }
</style>
